<template>
	<a-layout-sider v-model:collapsed="collapsed" class="sider" collapsedWidth="50" style="background: #fff">
		<a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline" class="menu"
				@click="menuClick">

			<a-menu-item key="/">
				<pie-chart-outlined />
				<span>工作台</span>
			</a-menu-item>

			<a-sub-menu key="sub-1">
				<template #title>
					<span>
						<user-outlined />
						<span>用户权限</span>
					</span>
				</template>
				<a-menu-item key="/System/User">用户管理</a-menu-item>
				<a-menu-item key="/System/Role">角色管理</a-menu-item>
				<a-menu-item key="/System/Menu">目录管理</a-menu-item> 
				<a-menu-item key="/System/City">城市</a-menu-item>
				<a-menu-item key="/System/Dict">字典</a-menu-item>
			</a-sub-menu>

			<a-menu-item  key="/User/Demo">
				<desktop-outlined />
				<span>测试表格</span>
			</a-menu-item>

			<a-sub-menu key="sub1">
				<template #title>
					<span>
						<user-outlined />
						<span>User</span>
					</span>
				</template>
				<a-menu-item key="3">Tom1</a-menu-item>
				<a-menu-item key="4">Bill</a-menu-item>
				<a-menu-item key="5">Alex</a-menu-item>
				<a-menu-item key="6">Alex</a-menu-item>
				<a-menu-item key="7">Alex</a-menu-item>
				<a-menu-item key="8">Alex</a-menu-item>
				<a-menu-item key="9">Alex</a-menu-item>
				<a-menu-item key="10">Alex</a-menu-item>
				<a-menu-item key="11">Alex</a-menu-item>
				<a-menu-item key="12">Alex</a-menu-item>
				<a-menu-item key="13">Alex</a-menu-item>
				<a-menu-item key="14">Alex</a-menu-item>
				<a-menu-item key="15">Alex</a-menu-item>
				<a-menu-item key="16">Alex</a-menu-item>
				<a-menu-item key="17">Alex</a-menu-item>
				<a-menu-item key="18">Alex</a-menu-item>
				<a-menu-item key="19">Alex</a-menu-item>
			</a-sub-menu>
			<a-sub-menu key="sub2">
				<template #title>
					<span>
						<team-outlined />
						<span>Team</span>
					</span>
				</template>
				<a-menu-item key="6">Team 1</a-menu-item>
				<a-menu-item key="8">Team 2</a-menu-item>
			</a-sub-menu>
			<a-menu-item key="9">
				<file-outlined />
				<span>File</span>
			</a-menu-item>
		</a-menu>
		<div class="sider-bootm">
			<menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
			<menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
		</div>
	</a-layout-sider>
</template>

<script>

	export default ({
		components: {
		},
		data() {
			return {
				collapsed: false,
				selectedKeys: [this.$route.path]
			}
		},
		methods: {
			menuClick: function (item) {
				this.$router.push(item.key);
			},
		},
	});
</script>
